<template>
  <!-- 注册 -->
  <div class="zhuce">
    <header>
      <div class="return" @click="returns">
        <i class="iconfont icon-zuojiantou"></i>
      </div>
      <div class="title">注册</div>
    </header>
    <div class="enroll">
      <van-cell-group inset>
        <van-field
          v-model="user.username"
          center
          clearable
          placeholder="请输入用户名"
        >
        </van-field>
        <van-field
          v-model="user.password"
          type="password"
          placeholder="请输入密码"
          border-width-base="1px"
          border-color="#fff"
        />
      </van-cell-group>
    </div>
    <h1>点击“注册”代表您已阅读并同意用户使用协议</h1>
    <button class="btn2" @click="register">注册</button>
  </div>
</template>

<script>
import { getRegistered } from "../../api/index";
import { Notify } from "vant";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    //跳转
    returns() {
      this.$router.push("/my_login");
    },
    //注册
    async register() {
      let res = await getRegistered(this.user);
      console.log(res);
      let {
        meta: { status, msg },
      } = res;
      if (status == 200) {
        // 注册成功提示
        Notify({ type: "success", message: msg });
        // 3 跳转到登录页面
        this.$router.push({ path: "/my_login" });
      } else {
        //失败提示
        Notify({ type: "warning", message: msg });
      }
    },
  },
};
</script>

<style scoped lang="less">
.zhuce {
  width: 100%;
  height: 100%;
  text-align: center;
  header {
    width: 100%;
    height: 88px;
    background-color: #ff5654;
    display: flex;
    .return {
      margin-left: 20px;
      i {
        color: #fff;
        font-size: 34px;
        line-height: 88px;
      }
    }
    .title {
      padding: 0 285px;
      color: #fff;
      font-size: 36px;
      line-height: 88px;
    }
  }

  .enroll {
    margin: 20px;
    box-shadow: 0px 0px 5px 0px #ccc;
    border-radius: 4px;
  }
  h1 {
    font-size: 15px;
    color: #000000;
    margin: 10px 10px;
    opacity: 50%;
    text-align: center;
  }
  .btn2 {
    border: 3px solid #ff5654;
    width: 630px;

    height: 80px;
    border-radius: 5px;

    background-color: #ff5654;
    color: #fff;
    font-size: 20px;
  }
}
</style>